<script setup>
import CardData from './modules/card-data.vue';
import HeaderBanner from './modules/header-banner.vue';
import LineChart from './modules/line-chart.vue';
import PieChart from './modules/pie-chart.vue';
import TodoList from './modules/todo-list.vue';
import orderSale from './modules/order-sale.vue';
</script>

<template>
  <div class="p-2">
    <ElSpace direction="vertical" fill class="full-space w-[100%] pb-0" :size="0">
      <HeaderBanner class="mb-16px" />
      <CardData class="mb-[16px]" />
      <ElRow :gutter="16" class="w-full">
        <ElCol :lg="14" :sm="24" class="mb-16px">
          <LineChart />
        </ElCol>
        <ElCol :lg="10" :sm="24" class="mb-16px">
          <PieChart />
        </ElCol>
      </ElRow>
      <ElRow :gutter="16">
        <ElCol :lg="18" :sm="24" class="mb-16px">
          <orderSale />
        </ElCol>
        <ElCol :lg="6" :sm="24" class="mb-16px">
          <TodoList />
        </ElCol>
      </ElRow>
    </ElSpace>
  </div>
</template>

<style scoped lang="scss">
.full-space {
  > :deep(.el-space__item) {
    width: 100%;
  }
}
</style>
